page {
	background-color: #F6F6F6;
}
.container {
	width: 100%;
	height: 100vh;
	background-color: #F6F6F6;
	padding-top: 30rpx;
	.boxS{
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
		border-radius:10rpx;
		/* padding: 0 20rpx; */
		width: 702rpx;
		margin: 0 auto;
	}
	.header {
		width: 702rpx;
		height: 160rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content:space-between;
		image {
			width: 56rpx;
			height: 51rpx;
		}
		.h-left {
			margin-left: 32rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.h-mid {
			width: 215rpx;
			// height: 160rpx;
			height: 100%;
			background: #E1E1E1;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-left: 10rpx;
		}
		.active {
			background: #fbd220;
		}
	}
	.userData {
		margin-top: 21rpx;
		// height: 300rpx;
		background-color: #F6F6F6;
		.u-head {
			display: flex;
			padding: 0 22rpx;
			justify-content: space-between;
			height: 100rpx;
			align-items: center;
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			.u-head-l {
				display: flex;
				align-items: center;
			}
		}
		.u-two {
			height: 79rpx;
			padding: 0 22rpx;
			line-height: 79rpx;
			background-color: #FFFFFF;
			font-size:26rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(102,102,102,1);
			border-bottom: 2rpx solid #EEEEEE;
		}
		.u-shop {
			position: relative;
			.img3 {
				position: absolute;
				right: 20rpx;
				top: 44rpx;
				width: 12rpx;
				height: 22rpx;
			}
			padding: 0 21rpx;
			height: 119rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			.u-shop-left {
				font-size: 26rpx;
				color: #666666;
			}
			.u-shop-right {
				display: flex;
				align-items: center;
				margin-right: 40rpx;
				font-size: 28rpx;
				color: #333333;
				image {
					width: 77rpx;
					height: 79rpx;
					border-radius: 50%;
					margin-right: 19rpx;
				}
			}
		}
	}
	
	.carData {
		margin-top: 21rpx;
		/* height: 401rpx; */
		background-color: #F6F6F6;
		.c-head {
			display: flex;
			padding: 0 22rpx;
			justify-content: space-between;
			height: 100rpx;
			align-items: center;
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			.c-head-l {
				display: flex;
				align-items: center;
			}
		}
		.c-two {
			height: 79rpx;
			padding: 0 22rpx;
			line-height: 79rpx;
			background-color: #FFFFFF;
			font-size:26rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(102,102,102,1);
			border-bottom: 2rpx solid #EEEEEE;
		}
		.car-specif-item {
			/* height: 108rpx; */
			padding: 29rpx 22rpx;
			position: relative;
			background-color: #FFFFFF;
			display: flex;
			/* align-items: center; */
			
			font-size:30rpx;
			/* padding: 0 22rpx; */
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(102,102,102,1);
			border-bottom: 1rpx solid #EEEEEE;
		}
		.specif-right {
			margin-left: 50rpx;
			color:rgba(51,51,51,1);
			.tes {
				display: flex;
				align-items: center;
				height: 40rpx;
				.colors {
					border: 1rpx soild #000000;
					width: 40rpx;
					height: 40rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
				
			}
		}
		.img3 {
			position: absolute;
			right: 20rpx;
			top: 44rpx;
			width: 12rpx;
			height: 22rpx;
		}
	}
	
	.b-text {
		color: #666666;
		font-size: 26rpx;
		margin-top: 30rpx;
		box-shadow: none;
		background-color: #f6f6f6;
		.b-t {
			font-family:PingFang SC;
			font-weight:500;
			color:#FBB000;
		}
	}
	.img1 {
		height: 188rpx;
		margin-top: 100rpx;
		.btn{
			width: 702rpx;
			height: 88rpx;
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #343434;
		}
		.btn:after{
			border: 0rpx;
		}
		.hetong{
			background: #EEEEEE;
		}
		.hetongzhong{
			background: linear-gradient(-90deg, #FBD321, #FFE23E);
		}
	}
	.pop-one {
		height: 111rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size:36rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 40rpx;
	}
	.pop-item {
		height: 116rpx;
		float: left;
		width: 340rpx;
		/* margin-bottom: 20rpx; */
		margin: 0 17rpx 20rpx 17rpx;
		
		background:rgba(244,244,244,1);
		border-radius:10px;
		justify-content: center;
		font-size:32rpx;
		font-weight:500;
		color:rgba(102,102,102,1);
	}
	.pop-imgs {
		margin: 15rpx 0 10rpx 0;
		.colors {
			border: 1rpx solid #000000;
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
		}
		display: flex;
		justify-content: space-around;
	}
	.pop-img {
		display: flex;
		justify-content: space-around;
		width: 324rpx;
		
	}
	
}
.width-78{
	width: 76%;
}
.width-24{
	width: 24%;
}
.wid440{
	width: 440rpx !important;
}
.iconcolor{
	width: 40rpx;
	height: 40rpx;
  border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	border: 2rpx solid #999;
	// margin-top: 12rpx;
	margin-right: 6rpx;
	// line-height: 40rpx;
	// margin: -8rpx 4rpx
	font-size: 24rpx;
	}
	.iconcolor2{
		width: 40rpx;
		height: 20rpx;
		font-size: 24rpx;
	}
	.headImg{
		width: 78rpx;
		height: 78rpx;
		// border-radius: 50%;
		// overflow: hidden;
		// vertical-align: middle;
		display: inline-block;
		margin-right: 10rpx;
		image{
			width: 78rpx;
			height: 78rpx;
			border-radius: 50%;
			// vertical-align: middle;
		}
	}
	.topImg{
		width: 210rpx;
		height: 140rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
		// margin: 10rpx 0rpx;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}

	}
	.iconImg{
		width: 210rpx;
		height: 140rpx;
		border-radius: 10rpx;
		text-align: center;
		// background: #b5b5b5;
	}
	.colorListWrap{
		width: 100%;
		// max-height:320rpx ;
		text-align: center;
		.title{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid #EEEEEE;
		}
		
		.colorList{
			display: flex;
			// justify-content:flex-start ;
			width: 95%;
			height: 120rpx;
			margin: 2.5% auto;
			flex-wrap:wrap;
			
			.colorwrap{
				width: 340rpx;
				height: 64rpx;
				line-height: 64rpx;
				padding:0rpx  15rpx ;
				margin:8rpx;
				background: #F4F4F4;
				border-radius: 60rpx;
				display: flex;
				justify-content:center  ;
				.flexlist{
					width: 50%;
					
				}
			}
		

		}
	
	}

.bg-fff{
 background: #fff;	
}